Documentos estáticos de
Quarto®

Encuentro 4
2024

Christian
Ballejo

Esqueleto de un .qmd

Los archivos .qmd suelen tener tres partes. Una sola cabecera YAML (obligatoria), texto y código (mezclado).


---
title: "ggplot2"
date: "18/04/2024"
format: html
---

## Calidad del aire

Esta es la relación entre la temperatura y el nivel de ozono.

```{r}
#| label: fig-calidad_aire
library(ggplot2)
ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point() + 
  geom_smooth(method = "loess"
)
```

Opciones de salida YAML


---
format: html
---
---
format: pdf
---
---
format: typst
---

typst es un nuevo sistema de composición tipográfica basado en marcas para ciencia.

Se le pueden agregar opciones. Las opciones deben estar debajo del formato principal (los espacios son importante y hay que respetarlos -identación-)

---
format: 
  html:
    toc: true
    code-fold: true
---

YAML es sensible a la identación

---
format:html # invalido, falta espacio luego de :
---

---
format: # invalido, se lee como formato ausente
html
---

---
format: 
  html: # valido pero necesita de opciones posteriores
---

El formato válido puede ser diferente según lo que se necesite.

format: html # valido - hay espacio

# valido - formato con opciones
format: 
  html:
    toc: true

Ventajas de RStudio


RStudio (también algunos otros editores como VSCode) integran entre sus herramientas la finalización enriquecida: podemos comenzar con una palabra y tabular (TAB) para completar, o presionar Ctrl + espacio para ver todas las opciones disponibles.

️ Actividad 1


  • Genere un nuevo proyecto y dentro un documento de Quarto desde RStudio (formato HTML)


  • Pruebe Ctrl + space para visualizar las opciones de YAML


  • Pruebe con la tabulación para completar otras opciones que recuerde
02:00

Texto y Markdown


Inicialmente y para el uso general conviene aprovechar el modo Visual de RStudio para incorporar marcas de lenguaje Markdown.

Bloques

Pandoc y, por tanto, Quarto aceptan bloques Divs y Spans propios del HTML con sintaxis delimitada por :::

Estructura general:

  • Comienza y termina con igual número de : - mínimo de 3 :::
  • Agregar llaves para indicar el inicio de la clase {.class} o {varias-clase}

Este contenido es el modificado

Este contenido tiene un diseño de borde izquierdo violeta

Este contenido tiene un diseño de borde izquierdo violeta

  • Se puede pensar en una división ::: como un <div> HTML pero que también sirve cuando la salida es en PDF.

Bloques de llamadas

Existen cinco tipos de leyendas, que incluyen: note (nota), tip (consejo), warning (advertencia), caution (precaución), e important (importante).

Nota

Existen cinco tipos de leyendas, que incluyen: note (nota), tip (consejo), warning (advertencia), caution (precaución), e important (importante)

Advertencia

Estos bloques facilitan una forma sencilla de llamar la atención, por ejemplo, sobre esta advertencia.

Importante

Se pueden editar los titulos con doble #. Por ejemplo: ## Importante

Consejo

Precaución

Esto se encuentra bajo construcción

Bloques de línea (Spans)

Estructura general:

  • Encerrar el texto con corchetes [].
  • Agregar llaves para indicar el inicio de la clase {.class} o {varias-clases}

[texto]{.class}

  • Estos spans entre corchetes texto se pueden considerar como un <span .class>Texto</span> de HTML pero nuevamente estos son compatibles para aplicar atributos nativos de Pandoc/Quarto.


Este es un texto con formato [especial]{style=“color:orange;”}.

Este es un texto con formato especial.

  • Tanto los Divs como los Spans se pueden agregar desde el modo Visual: Format -> Div… y Format -> Span…

️ Actividad 2


  • Regrese al documento HTML Quarto que generó recién

  • Inserte algún bloque Span sobre alguna palabra y cambie su color

  • Inserte algún bloque Div sobre un párrafo y modifique el tamaño de la letra con font-size: 36px;

  • Inserte el bloque de llamada (callout) que desee y configúrelo.

  • En cada situación visualice los cambios en el modo Source y renderice

Figuras

  • Sintaxis básica de markdown

![Mar del Plata](images/mdp.jpg)

Mar del Plata

Figuras

  • Sintaxis markdown con opciones

![Mar del Plata](images/mdp.jpg){width=120%}

Mar del Plata

Figuras

  • Desde código R
```{r}
#| out-width: 50%
#| fig-align: right

knitr::include_graphics("images/mdp.jpg")
```

Fragmentos / columnas

![Mar del Plata](images/mdp.jpg){fig-align=“left”}

Mar del Plata

Las columnas se construyen con bloques Divs ::: columns y luego ::: {.column width=“50%”} para cada una de ellas (en este ejemplo que son 2). Cada bloque se cierra con :::

![](images/mdp2.png){fig-align=“right” .lightbox}

La opción .lightbox utiliza la librería de javascript GLightbox para mostrar un efecto sobre la imagen cuando pulsamos sobre ella.

TabSet (Pestañas)

```{r}
#| eval: false
head(datasets::iris)
```

Las pestañas son un bloque Divs especiales ::: {.panel-tabset} :::

El nombre de cada pestaña se establece con ## Nombre

  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
1          5.1         3.5          1.4         0.2  setosa
2          4.9         3.0          1.4         0.2  setosa
3          4.7         3.2          1.3         0.2  setosa
4          4.6         3.1          1.5         0.2  setosa
5          5.0         3.6          1.4         0.2  setosa
6          5.4         3.9          1.7         0.4  setosa

Diagramas

Quarto tiene soporte nativo para incrustar diagramas Mermaid y Graphviz . Esto permite crear diagramas de flujo, diagramas de secuencia, diagramas de estado, diagramas de Gantt y otros utilizando una sintaxis de texto plano inspirada en Markdown.

```{{mermaid}}
flowchart LR
  A[Inicio] --> B(Pre-proceso)
  B --> C{Decisión}
  C --> D[Resultado 1]
  C --> E[Resultado 2]
```

️ Actividad 3


  • En el documento HTML Quarto que estamos editando, inserte un bloque TabSet con dos pestañas. En cada una de ellas incluya una imagen (puede capturarla con la herramienta Recortes de Windows) y almacenarla dentro de la carpeta de trabajo del proyecto.


  • Incorpore un diagrama Mermaid. Puede copiar el ejemplo de la diapositiva o modificarlo a gusto.


  • En cada situación visualice los cambios en el modo Source y renderice

Continuará…